<!-- 直播视频管理列表 -->
<template>
  <div id="purchaseApplyList">
    <el-form :inline="true" label-position="left" label-width="100px">
      <div style="margin-left:10px;line-height:40px;font-size:22px;font-weight:400;">
        <div style="margin-left:15px;">
          <el-row>
            <el-form-item label="直播标题">
              <el-input v-model="form.title" clearable placeholder="请输入直播标题" style="width:230px"></el-input>
            </el-form-item>
            <el-form-item label="主播">
              <el-select v-model="form.anchorCode" filterable clearable remote reserve-keyword
                         placeholder="请输入主播姓名"
                         :remote-method="getUserInfoByAuth"
                         :loading="loading" style="width:230px">
                <el-option v-for="item in anchorList"
                           :key="item.userCode"
                           :label="item.userName"
                           :value="item.userCode">
                  <span style="float: left">{{ item.userName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.userCode }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="直播类型">
              <el-select v-model="form.typeList" multiple placeholder="请选择直播类型">
                <el-option
                  v-for="item in liveTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="直播分类">
              <el-select v-model="form.categoryIdList" multiple placeholder="请选择直播分类">
                <el-option
                  v-for="item in categoryList"
                  :key="item.id"
                  :label="item.categoryName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <div style="float:right">
              <el-button type="primary" @click="btnPageList(true)" icon="my-search" class="mL57">搜索</el-button>
              <el-button type="primary" @click="btnReset" icon="my-spinner11">重置</el-button>
              <el-button @click="createVideo">创建直播</el-button>
            </div>
          </el-row>
        </div>
      </div>
    </el-form>
    <!-- 列表 -->
    <el-row>
      <el-table v-loading="loadingTableData" :data="tableData" row-key="id" :stripe="false" style="width: 100%">
        <el-table-column label="序号" type="index" show-overflow-tooltip width="50"></el-table-column>
        <el-table-column prop="title" label="直播标题">
          <template slot-scope="scope">
            <el-button type="text" @click="getLiveVideoDetail(scope.row)">{{ scope.row.title }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="liveNo" label="直播编号"></el-table-column>
        <el-table-column prop="type" label="直播类型" :formatter="formateType"></el-table-column>
        <el-table-column prop="liveStatus" label="直播状态" :formatter="formateLiveStatus"></el-table-column>
        <el-table-column prop="categoryName" label="直播分类"></el-table-column>
        <el-table-column prop="anchorName" label="主播"></el-table-column>
        <el-table-column prop="liveTime" label="直播开始时间" :formatter="$$$dateFormat"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" :formatter="$$$dateFormat"></el-table-column>
        <el-table-column prop="createUserName" label="创建人"></el-table-column>
        <el-table-column label="上架状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.operateTran.isShelves.value == 1"
              @change="setVideo(scope.row, 'shelves',scope.row.operateTran.isShelves.value)"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="350">
          <template slot-scope="scope">
            <el-button type="text" class="dbutton" size="small" v-if="scope.row.operateTran.liveStatus.value  !=  1"
                       @click="updateLiveVideo(scope.row)">修改
            </el-button>
            <div v-if="scope.row.operateTran.isDeleted.value  ==  0 && scope.row.operateTran.isShelves.value  == 1">
              <el-button type="text" class="dbutton" size="small"
                         @click="setVideo(scope.row, 'carousel',scope.row.operateTran.isCarousel.value)">{{
                scope.row.operateTran.isCarousel.label}}
              </el-button>
              <el-button type="text" class="dbutton" size="small"
                         @click="setVideo(scope.row, 'top',scope.row.operateTran.isTop.value)">{{
                scope.row.operateTran.isTop.label}}
              </el-button>
              <el-button type="text" class="dbutton" size="small"
                         @click="setVideo(scope.row, 'status',scope.row.operateTran.liveStatus.value) ">{{
                scope.row.operateTran.liveStatus.label}}
              </el-button>
            </div>
            <el-button type="text" class="dbutton" size="small"
                       @click="setVideo(scope.row, 'delete',scope.row.operateTran.isDeleted.value)">{{
              scope.row.operateTran.isDeleted.label}}
            </el-button>

            <el-button type="text" class="dbutton" size="small"
                       @click="setVideo(scope.row, 'shelves',scope.row.operateTran.isShelves.value)">{{
              scope.row.operateTran.isShelves.label}}
            </el-button>

            <el-button v-if="scope.row.liveStatus != 0" type="text" class="dbutton" size="small"
                       @click="exportOnlineUser(scope.row)">导出在线人
            </el-button>
            <el-button type="text" class="dbutton" size="small"
                       @click="clearChannelCache(scope.row)">清空Channel缓存
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 分页 -->
    <div class="mT20 mB20 float-right" style="width:100%;text-align:right;">
      <div style="float:right">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="form.pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="form.pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="form.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import {liveVideoAPI, userInfoAPI, liveBasicAPI} from "@/api/index";

  export default {
    components: {},
    data() {
      return {
        value: true,
        loginUser: {
          uid: this.$root.uid,
          username: this.$root.username,
          email: this.$root.email
        },
        loadingTableData: false,
        defaultType: {
          label: '直播',
          value: 2
        },
        form: {
          pageIndex: 1,
          pageSize: 10,
          total: 0
        },
        tableData: [], //列表
        liveTypeList: [
          {
            value: 0,
            label: "预告"
          },
          {
            value: 1,
            label: "回看"
          },
          {
            value: 2,
            label: "直播"
          }
        ],
        operateObj: {
          isCarousel: [{label: '设置轮播', value: 0}, {label: '取消轮播', value: 1}],
          isTop: [{label: '置顶', value: 0}, {label: '取消置顶', value: 1}],
          liveStatus: [{label: '开启(只限预告)', value: 0}, {label: '关闭(只限直播中)', value: 1}, {
            label: '重新开启(只限直播结束)',
            value: 2
          }],
          isDeleted: [{label: '删除', value: 0}],
          isShelves: [{label: '上架', value: 0}, {label: '下架', value: 1}],
        },
        categoryList: [],
        loading: false,
        loginRoleUser: {
          purchaseAdminRole: this.$root.purchaseAdminRole,
          developRole: this.$root.developRole,
          purchaseWorkRole: this.$root.purchaseWorkRole,
        },
        anchorList: []
      };
    },
    created: function () {
      //获取直播列表
      this.btnPageList();
      //获取获取分类集合
      this.getCategoryList()
    },
    methods: {
      //获取分类集合
      getCategoryList() {
        liveBasicAPI.getCategoryList({}, res => {
          if (res) {
            this.categoryList = res;
          }
        })
      },
      //每页显示条数更改
      handleSizeChange(pageSize) {
        this.form.pageSize = pageSize;
        this.btnPageList();
      },
      //跳转、下一页等
      handleCurrentChange(pageIndex) {
        this.form.pageIndex = pageIndex;
        this.btnPageList();
      },
      //重置
      btnReset() {
        this.form.userName = null;//申请人
        this.form.userCode = null;//申请人编号
        this.form.title = null;
        this.form.anchorCode = null;
        this.form.typeList = [];
        this.form.categoryList = []
        this.btnPageList();
      },
      //查询
      btnPageList(isClickFlag) {
        let that = this;
        that.loadingTableData = true;
        //判断是否点击查询按钮
        if (isClickFlag) {
          this.form.pageIndex = 1;
        }
        //请求后台
        liveVideoAPI.getLiveVidePage(
          that.form,
          res => {
            if (res) {
              that.loadingTableData = false;
              //赋值
              that.tableData = this.buildData(res.records);
              that.form.total = res.total;
              that.form.pageIndex = res.page.pageIndex;
              that.form.pageSize = res.page.pageSize;
            }
          },
          () => {
            this.loadingTableData = false;
          }
        );
      },
      //加工数据
      buildData(data) {
        var that = this;
        data.forEach((item, index) => {
          item.operateTran = {}
          if (item.isCarousel == that.operateObj.isCarousel[0].value) {
            item.operateTran.isCarousel = that.operateObj.isCarousel[0]
          } else {
            item.operateTran.isCarousel = that.operateObj.isCarousel[1]
          }

          if (item.isTop == that.operateObj.isTop[0].value) {
            item.operateTran.isTop = that.operateObj.isTop[0]
          } else {
            item.operateTran.isTop = that.operateObj.isTop[1]
          }
          if (item.liveStatus == that.operateObj.liveStatus[0].value) {
            item.operateTran.liveStatus = that.operateObj.liveStatus[0]
          } else if (item.liveStatus == that.operateObj.liveStatus[1].value) {
            item.operateTran.liveStatus = that.operateObj.liveStatus[1]
          } else {
            item.operateTran.liveStatus = that.operateObj.liveStatus[2]
          }
          if (item.isShelves == this.operateObj.isShelves[0].value) {
            item.operateTran.isShelves = that.operateObj.isShelves[0]
          } else {
            item.operateTran.isShelves = that.operateObj.isShelves[1]
          }
          if (item.isDeleted == 0) {
            item.operateTran.isDeleted = that.operateObj.isDeleted[0]
          }
        })
        return data
      },
      //远程获取需求方列表
      getUserInfoByAuth(query) {
        if (query != null) {
          console.log(query);
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            let param = {query: query};
            userInfoAPI.queryUserByInputParam(param, data => {
              this.anchorList = data;
            });
          }, 200);
        } else {
          this.anchorList = [];
        }
      },
      // 采购所属转换器
      formateType(row, column) {
        var status = row[column.property];
        if (status == undefined) {
          return "";
        }
        if (status == 0) {
          return "预告"
        } else if (status == 1) {
          return "回看"
        } else if (status == 2) {
          return "直播"
        }
      },
      formateLiveStatus(row, column) {
        var status = row[column.property];
        if (status == undefined) {
          return "";
        }
        if (status == 0) {
          return "未直播"
        } else if (status == 1) {
          return "正在播放"
        } else if (status == 2) {
          return "直播结束"
        }
      },
      createVideo() {// 创建直播
        this.$router.push({path: "/createLiveVideo"})
      },
      setVideo(row, operateType) {
        let message = "";
        switch (operateType) {
          case 'delete':
            message = row.operateTran.isDeleted.label;
            break;
          case 'top':
            message = row.operateTran.isTop.label;
            break;
          case 'carousel':
            message = row.operateTran.isCarousel.label;
            break;
          case 'status':
            message = row.operateTran.liveStatus.label;
            break;
          case 'shelves':
            message = row.operateTran.isShelves.label;
            break;
        }

        let that = this;
        this.$confirm(message + ' 是否继续?', '友情提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.doSetVideo(row, operateType, message);
        })
      },
      clearChannelCache(row) { // 清空对应视频的channel缓存
        let that = this;
        if(row.liveStatus !== 2){ //
          that.$message.warning("只有直播结束才可以清空聊天服务器Channel缓存！")
          return
        }
        this.$confirm('清空聊天服务channel缓存 是否继续?', '友情提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var param = {
            userId: that.loginUser.uid,
            liveNo: row.liveNo,
            ctxId: that.ctxId,
            videoId: row.id
          }
          liveVideoAPI.clearChannel(param, (res)=>{
            that.$message.success("操作成功！")
          });
        })
      },
      doSetVideo(row, operateType, message) {
        row.operateType = operateType
        let videoSetting = {
          isTop: row.operateTran.isTop.value == 1 ? 0 : 1,
          isCarousel: row.operateTran.isCarousel.value == 1 ? 0 : 1,
          // liveStatus: row.operateTran.liveStatus.value == 1 ? 0 : 1,
          isDeleted: row.operateTran.isDeleted.value == 1 ? 0 : 1,
          isShelves: row.operateTran.isShelves.value == 1 ? 0 : 1,
        }
        if (row.liveStatus == 0) {
          videoSetting.liveStatus = 1
        } else if (row.liveStatus == 1) {
          videoSetting.liveStatus = 2
        } else if (row.liveStatus == 2) {
          videoSetting.liveStatus = 1
        }
        row.videoSetting = videoSetting;
        //请求后台
        liveVideoAPI.setVideo(
          row,
          res => {
            if (res) {
              this.$message.success(message + "成功");
              this.btnPageList();
            }
          }
        )
      },
      exportOnlineUser(row) {// 导出在线人
        window.location.href = "/live/liveVideo/exportOnlineUser?obj=" + encodeURIComponent(JSON.stringify(row));
      },
      updateLiveVideo(row) {
        this.$router.push({path: "/createLiveVideo", query: {id: row.id}});
      },
      getLiveVideoDetail(row) {
        this.$router.push({path: "/liveVideoDetail", query: {id: row.id, liveNo: row.liveNo}});
      }
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .mL57 {
    margin-left: 57px !important;
  }

  .el-tag {
    background-color: rgba(255, 255, 255, 0.2);
    border: 0px;
  }

  .div_total {
    line-height: 32px;
    display: inline;
    font-size: 16px;
    color: #606266;
    margin: 5px 100px 0px 0px;
  }

  .dbutton {
    cursor: pointer;
  }
</style>
